<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath %>">
		<meta charset="utf-8">
		<title>在线代码解释器</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<link rel="stylesheet" href=css/bootstrap.min.css>
		<link rel="stylesheet" href=css/bootstrap-table.min.css>
		<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
		<script type="text/javascript" src="edit_area/edit_area_full.js"></script>
		<script  type="text/javascript">
		window.onload = function(){
			//获取选择的编程语言
			var lan = $("#language option:selected").text();
			initEditArea("textarea_1",lan);

			$("#language").change(function(){
				var l = $(":selected",this).text();
				$("#yuyan").val(l);
				initEditArea("textarea_1",l);
			});

			var l = $("#language :selected").text();
			$("#yuyan").val(l);
		}

		
		function initEditArea(eleId,lan){
			console.log(eleId + " " + lan);
			var value = editAreaLoader.getValue(eleId);
			$("#frame_"+eleId).remove();
			$("#"+eleId).show();
			editAreaLoader.init({
				id : eleId		// textarea id
				,syntax: lan			// syntax to be uses for highgliting
				,start_highlight: true		// to display with highlight mode on start-up
			});
		}

		function subTryForm(){
			$("#tryCode").val(editAreaLoader.getValue("textarea_1"));
		}
		</script>
	</head>
	<body >
		<%@include file="/header.jsp" %>
		<div class="container-fluid">
		<h1>在线编写代码</h1>
		<hr />
		<form action="code/try" target="demo" method="post">
		<button class="btn btn-primary" type="submit" onclick="subTryForm();">提交运行</button>
		<input type="hidden" name="lan" id="yuyan" />
		<textarea name="code" id="tryCode" style="display: none;"></textarea>
		</form>
		<div class="row" style="margin-top:15px;">
			<div class="col-md-6">
				<form action="code/add" method="post" class="form-horizontal">
				<div class="form-group">
				    <label for="inputEmail3" class="col-sm-2 control-label">编程语言：</label>
				    <div class="col-sm-10">
				    <select name="language.id" id="language" class="form-control">
						<c:forEach items="${languages }" var="lan">
							<option value="${lan.id }">${lan.name }</option>
						</c:forEach>
					</select>
				    </div>
				  </div>
					<div class="form-group">
				    <label for="inputEmail3" class="col-sm-2 control-label">代码名称：</label>
				    <div class="col-sm-10">
				      <input type="text" class="form-control" id="inputEmail3" name="name" placeholder="代码片段名称">
				    </div>
				  </div>
				  <div class="form-group">
				  	 <div class="col-sm-12">
				  	 <textarea id="textarea_1" name="code" style="width:100%" rows="15"></textarea>
				  	 </div>
				  </div>
				
				<div>
					<button class="btn btn-success" type="submit">保存代码</button>
				</div>
				</form>
			</div>
			<div class="col-md-6">
			结果显示
			<hr />
			<iframe src="" name="demo" width="100%" height="100%" frameborder="0"></iframe>
			</div>
		</div>
		</div>
	</body>
</html>
